<template>
  <div class="card">
    <div class="top jcb aic">
      <div style="color: #999; font-size: 13px">
        {{ title }}
      </div>
      <div>
        <el-tooltip
          class="item"
          effect="dark"
          :content="instructions"
          placement="top-start"
        >
          <i
            class="el-icon-warning-outline cP"
            style="color: #999; font-size: 16px"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <div class="content">
      <div v-if="type == 1">
        <h1 class="number">2,081</h1>
        <div id="typebox1"></div>
        <div class="footer">每天访问 230</div>
      </div>
      <div v-if="type == 2">
        <h1 class="number">￥126,560</h1>
        <div id="typebox2" class="fdc jcb">
          <div class="aic">
            周同比
            <div class="mx5 text-center" style="width: 30px">12%</div>
            <i class="el-icon-caret-top" style="color: red"></i>
          </div>
          <div class="aic">
            日同比
            <div class="mx5 text-center" style="width: 30px">2%</div>
            <i class="el-icon-caret-bottom" style="color: #52c41a"></i>
          </div>
        </div>
        <div class="footer">日均销售额 ￥ 234.56</div>
      </div>
      <div v-if="type == 3">
        <h1 class="number">6,061</h1>
        <div id="typebox3"></div>
        <div class="footer">转化率 60%</div>
      </div>
      <div v-if="type == 4">
        <h1 class="number">78%</h1>
        <div id="typebox4" class="aic">
          <el-progress style="width: 100%" :percentage="78"></el-progress>
        </div>
        <div class="footer aic jca">
          <div class="aic">
            周同比
            <div class="mx5 text-center" style="width: 30px">12%</div>
            <i class="el-icon-caret-top" style="color: red"></i>
          </div>
          <div class="aic">
            日同比
            <div class="mx5 text-center" style="width: 30px">2%</div>
            <i class="el-icon-caret-bottom" style="color: #52c41a"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, onUpdated } from "vue";
import * as echarts from "echarts";


const state = reactive({});

defineProps({
  title: {
    //标题
    type: String,
  },
  instructions: {
    //备注
    type: String,
  },
  type: {
    //类型 1 访问量 2 成交额 3支付笔数 4 活动效果
    type: String,
  },
});
var myChart: any, myChart3: any;

const type1 = () => {
  var option: any, option3: any, option4: any;
  var chartDom: any = document.getElementById("typebox1");
  var chartDom3: any = document.getElementById("typebox3");
  myChart = echarts.init(chartDom);
  myChart3 = echarts.init(chartDom3);
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    xAxis: {
      type: "category",
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        showSymbol: false,
        lineStyle: {
          width: 0,
        },
        areaStyle: {
          color: "#74bcff",
        },
      },
    ],
  };
  option3 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    xAxis: {
      type: "category",
      show: false,
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "bar",
        showSymbol: false,
        lineStyle: {
          width: 0,
        },
        areaStyle: {
          color: "#74bcff",
        },
      },
    ],
  };

  myChart3.setOption(option3);
  myChart.setOption(option);
};
onMounted(() => {
  setTimeout(() => {
    type1();
    window.addEventListener("resize", () => {
      myChart3.resize();
      myChart.resize();
    });
  }, 500);
});
onUpdated(() => {});
</script>

<style scoped lang="scss">
.card {
  background-color: #fff;
  padding: 15px;
  .top {
    padding-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
  }
  .content {
    .number {
      line-height: 4rem;
    }
    #typebox1,
    #typebox2,
    #typebox3,
    #typebox4 {
      height: 65px;
      padding-bottom: 15px;
      width: 100%;
    }

    .footer {
      border-top: 1px solid #f0f0f0;
      padding-top: 10px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: "tnum";
    }
  }
}
</style>
